<script setup>
import { ref, reactive } from 'vue';
import Peichart from './chart/peichart.vue';
import sl from './chart/sl.vue';

const list = ref([{ value: 55 }, { value: 46 }, { value: 37 }, { value: 62 }, { value: 58 }]);
// const list = ref([{ value: 55 }, { value: 46 }, { value: 37 }, { value: 62 }]);
const conf = reactive({
  lineWidth: 25,
  radius: '60%',
  activeRadius: '65%',
  digitalFlopStyle: {
    fill: 'pink',
    fontSize: 18,
    fill: '#fff',
  },
  data: [
    {
      name: '深圳',
      value: 98,
    },
    {
      name: '广州',
      value: 150,
    },
    {
      name: '惠州',
      value: 62,
    },
    {
      name: '珠海',
      value: 54,
    },
  ],
});
</script>

<template>
  <div class="modulefourth">
    <div class="modulefourth-list">
      <ul>
        <li class="bgstyle" v-for="(v, i) in list" :key="i">
          <div class="peichart" v-if="i < list.length - 1">
            <h2>测试路段</h2>
            <Peichart :value="v.value" />
          </div>
          <div class="peichart" v-else>
            <h2>高峰路段</h2>
            <dv-active-ring-chart :config="conf" style="width: 100%; height: 200px" />
          </div>
          <dv-decoration-2 :reverse="true" style="width: 5px; height: 230px" />
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>
